<!DOCTYPE html>
<html>
<head>
    <title>Test Game</title>
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
	<script src="/javascripts/jquery-1.11.1.min.js"></script>
	
    <style>
		@charset "UTF-8";
		/*
		@名称: base
		@功能: 重设浏览器默认样式
		*/
		/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
		html { width: 100%; height: 100%; color: #000; background: #ececec; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

		/* 内外边距通常让各个浏览器样式的表现位置不同 */
		body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }

		/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
		article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

		/* HTML5 媒体文件跟 img 保持一致 */
		audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

		body { width: 100%; height: 100%; }

		/* 要注意表单元素并不继承父级 font 的问题 */
		body, button, input, select, textarea { font: 12px/1.5 'STHeiti','Microsoft YaHei','宋体', arial,\5b8b\4f53; }

		input, select, textarea { font-size: 100%; }

		/* 去掉各Table cell 的边距并让其边重合 */
		table { border-collapse: collapse; border-spacing: 0; }

		/* IE bug fixed: th 不继承 text-align*/
		th { text-align: inherit; }

		/* 去除默认边框 */
		fieldset, img { border: 0; }

		/* ie6 7 8(q) bug 显示为行内表现 */
		iframe { display: block; }

		/* 去掉 firefox 下此元素的边框 */
		abbr, acronym { border: 0; font-variant: normal; }

		/* 一致的 del 样式 */
		del { text-decoration: line-through; }

		address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: 500; }

		/* 去掉列表前的标识, li 会继承 */
		ol, ul { list-style: none; }

		/* 对齐是排版最重要的因素, 别让什么都居中 */
		caption, th { text-align: left; }

		/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
		h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }

		q:before, q:after { content: ''; }

		/* 统一上标和下标 */
		sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

		sup { top: -0.5em; }

		sub { bottom: -0.25em; }

		/* 让链接在 hover 状态下显示下划线 */
		a:hover { text-decoration: underline; }

		/* 默认不显示下划线，保持页面简洁 */
		ins, a { text-decoration: none; }

		/* 将i,em元素样式正常化 */
		i, em { font-style: normal; }
	</style>
	
	
	<style>
		#engine-box {
			width: 100%;
			height: 100%;
			background: url(../images/engine/bg_2.png) repeat;
		}
		
		#engine-bd {
			position: relative;
			width: 100%;
			height: 100%;
			background: url(../images/engine/bg_1.png) no-repeat left bottom;
			background-size: 100% auto;
		}
		
		#title1 {
			height: 100px;
			line-height: 100px;
			background: url(../images/engine/t1_320.png) no-repeat center center ;
		}
		
		#title2 {
			height: 100px;
			line-height: 100px;
			background: url(../images/engine/t2_320.png) no-repeat center center ;
		}
		@keyframes blinking {
			0% {
				bottom: -100px;
				opacity: 0;
			}
			25% {
				bottom: 0;
				opacity: 0.6;
			}
			
			55% {
				opacity: 0.8;
			}
			
			60% {
				opacity: 0.6;
			}
			
			65% {
				opacity: 0.4;
			}
			
			70% {
				opacity: 0.6;
			}
			
			75% {
				opacity: 0.8;
			}
			
			80% {
				opacity: 0.6;
			}
			
			85% {
				opacity: 0.4;
			}
			
			90% {
				opacity: 0.6;
			}
			
			95% {
				opacity: 0.8;
			}
			
			100% {
				bottom: 0;
				opacity: 0;
			}
		}
		
		@-webkit-keyframes blinking {
			0% {
				bottom: -100px;
				opacity: 0;
			}
			25% {
				bottom: 0;
				opacity: 0.6;
			}
			
			55% {
				opacity: 0.8;
			}
			
			60% {
				opacity: 0.6;
			}
			
			65% {
				opacity: 0.4;
			}
			
			70% {
				opacity: 0.6;
			}
			
			75% {
				opacity: 0.8;
			}
			
			80% {
				opacity: 0.6;
			}
			
			85% {
				opacity: 0.4;
			}
			
			90% {
				opacity: 0.6;
			}
			
			95% {
				opacity: 0.8;
			}
			
			100% {
				bottom: 0;
				opacity: 0;
			}
		}
		
		#title3 {
			position: absolute;
			bottom: -100px;
			width: 100%;
			height: 100px;
			line-height: 100px;
			background: url(../images/engine/b_320.png) no-repeat center center ;
			
			animation-name: blinking;
			animation-duration: 4s;
			animation-timing-function: linear;
			animation-delay: 1s;
			animation-iteration-count: infinite;
			
			-webkit-animation-name: blinking;
			-webkit-animation-duration: 4s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-delay: 1s;
			-webkit-animation-iteration-count: infinite;
		}
		
		@media screen and (max-width:640px) {
			#title1 {
				background: url(../images/engine/t1_320.png) no-repeat center center ;
			}
			#title2 {
				height: 100px;
				line-height: 100px;
				background: url(../images/engine/t2_320.png) no-repeat center center ;
			}
			#title3 {
				background: url(../images/engine/b_320.png) no-repeat center center ;
			}
		}
		
		@media screen and (min-width:640px) {
			#title1 {
				background: url(../images/engine/t1_640.png) no-repeat center center ;
			}
			#title2 {
				height: 180px;
				line-height: 180px;
				background: url(../images/engine/t2_640.png) no-repeat center center ;
			}
			#title3 {
				background: url(../images/engine/b_640.png) no-repeat center center ;
			}
		}
		
		#sid-box {
			position: absolute;
		    transition: bottom 0.4s;
			background: rgba(0, 0, 0, 0.6);
			width: 100%;
			height: 100px;
			bottom: -200px;
			text-align: center;
			border-radius: 10px;
		}
		
		#sid-label {
			font-size: 18px;
			color: #fff;
			height: 40px;
			line-height: 40px;
		}
		
		#sid-input {
			vertical-align: middle;
			width: 100px;
			font-size: 18px;
			height: 24px;
			line-height:24px;
			padding: 5px 10px;
			border: 1px solid #999;
			border-radius: 5px;
		}
		
		#sid-input:focus {
			border: 1px solid #81ddff;
		}
		
		#start_game {
			margin-left: 10px;
			font-size: 22px;
			color: #fff;
			vertical-align: middle;
			height: 36px;
			line-height: 36px;
			padding: 0 20px;
			border: none;
			background: #81ddff;
			border-radius: 5px;
		}

	</style>
</head>
<body>
	<div id="engine-box">
		<div id="engine-bd">
			<div id="title1">
				
			</div>
			
			<div id="title2">
				
			</div>			
			
			<div id="title3">&nbsp;</div>			
		</div>
	</div>
	
	<div id="sid-box">
		<p id="sid-label">请输入您的sid号</p>
		<p id="start-btn-box">
			<input type="text" id="sid-input"/>
			<button id="start_game">开始</button>
		</p>
		
	</div>

    <audio loop="" src="/resources/bgm1_loop.mp3" id="media" preload=""></audio>

    <script>
		
		var win = $(window);
		var winWidt = win.outerWidth();
		var winHeight = win.outerHeight();
		
		var sidHeight = winHeight * 0.8;
		var sidWidth = winWidt * 0.8;
		var sidBox = $('#sid-box');
		sidBox.css({
			width: sidWidth,
			left: (winWidt - sidWidth) / 2
		});
		
		var oInput = $('#sid-input');
		
		$('#start_game').click(function(){
			var sid = oInput.val();
			if(sid){
				window.location.href = '/?sid=' + sid;
			}
		});
	
		$(document).one('touchstart', function() {
			sidBox.css('bottom', 80);
			setTimeout(function(){
				oInput.focus();
			}, 200);
			document.getElementById('media').play();
		})
    </script>
</body>
</html>
